import React, { useState, useEffect } from "react";
import { Table, Popconfirm, Button, message } from "antd";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import AddOrEditModal from "./components/addOrEdit";
import styles from "./index.less";
import { fetchTaskCostList, addTaskCost, editTaskCost, delTaskCost } from '@/services/jobManage';

const TaskCostList = ({ location }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [fileList, setfileList] = useState([]);
  const [rowData, setRowData] = useState();
  const [costList, setCostList] = useState([]);
  const jobId = location.state.id;
  //获取任务费用列表
  const getTaskCostList = async () => {
    const res = await fetchTaskCostList(jobId);
    if (!res) return
    setCostList(res.data)
  };
  useEffect(() => {
    getTaskCostList();
  }, []);
  const onSubmit = async body => {
    let params = { ...body }
    if (!rowData) {//添加
      params.jobId = jobId;
      await addTaskCost(params)
    } else {
      params.id = rowData.id;
      await editTaskCost(params)
    }
    message.success('操作成功')
    setModalVisible(false);
    getTaskCostList()
  }
  const remove = async id => {
    await delTaskCost(id)
    message.success('操作成功！')
    getTaskCostList();
  };

  const columns = [
    {
      title: "费用名称",
      dataIndex: "name",
      render: (text, record) => {
        return (
          <a href={record.costUrl} target="_blank">
            {text}
          </a>
        );
      }
    },
    {
      title: "上传时间",
      dataIndex: "createTime"
    },
    {
      title: "费用状态",
      dataIndex: "costStatusDesc"
    },
    {
      title: "操作",
      align: "center",
      render: (text, record) => (
        <span className={styles.operation}>
          <a
            onClick={() => {
              setfileList([{ uid: 0, url: record.costUrl, name: '费用表格.xlsx' }])
              setModalVisible(true);
              setRowData(record);
            }}
          >
            编辑
          </a>
          <Popconfirm
            title={`确认删除企业用户？`}
            onConfirm={async () => {
              await remove(record.id);
            }}
            okText="确定"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </span>
      )
    }
  ];

  return (
    <PageHeaderWrapper className={styles.container}>
      <header>
        <Button
          type="primary"
          onClick={() => {
            setfileList([])
            setModalVisible(true);
            setRowData();
          }}
        >
          上传费用
        </Button>
      </header>
      <Table
        className="wrapperClass"
        rowKey="key"
        dataSource={costList}
        columns={columns}
      />
      <AddOrEditModal
        title={rowData ? "编辑" : "新增"}
        rowData={rowData}
        visible={modalVisible}
        setVisible={setModalVisible}
        fileList={fileList}
        setfileList={setfileList}
        onSubmit={onSubmit}
      />
    </PageHeaderWrapper>
  );
};

export default TaskCostList;
